<template>
  <div class="mt20">
    <div class="fb">基本信息</div>
    <zm-detail-table :list="baseInfoList" :info="infoData"></zm-detail-table>

    <div class="mt20" v-if="!['4','6', '7'].includes(infoData.type)">
      <div class="cf">
        <div class="fl fb">{{ infoTitle }}</div>
      </div>
      <zm-detail-table :list="productInfoList" :info="infoData"></zm-detail-table>
      <!-- 自定义金额的表 -->
      <div v-if="infoData.productType === '3' && infoData.isCustomize === '1'" class="mt20">
        <zm-table-data :data="infoData.customizePrice" :columns="customizePriceColumns" :show-page="false"></zm-table-data>
      </div>
    </div>
    <!-- 实物销售单 -->
    <div class="mt20 detail-table" v-if="infoData.type === '6'">
      <div class="fb mb10">产品信息</div>
      <zm-table-data :data="JSON.parse(infoData.productList).list" :columns="productListColumns" :show-page="false"></zm-table-data>
    </div>

    <!-- 文旅规则 -->
    <div class="mt20 detail-table" v-if="infoData.type === '7'">
      <div v-for="(item, index) in infoData.wenlvRule.list" :key="index">
        <div class="mtb20 fb">{{'活动规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <span v-for="(item1, index1) in wenlvInfoList" :key="index1">
            <tr class="vm wp50" v-if="!(+item.calculationMethod === 2 && ['unitPrice', 'joinCount'].includes(item1.label))">
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ infoData.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : infoData.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + infoData.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(infoData.bookRule['cinemaData']['relationId'])" v-if="infoData.bookRule['cinemaData']['relationId'] !== '-1'">
                    {{ infoData.bookRule['cinemaData']['relationName'] || '--' }}
                  </a>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </tr>
          </span>
        </table>
      </div>
    </div>

    <div v-if="['1', '2', '3', '4', '5'].includes(infoData.type)">
      <div class="mt20 fb">退货信息</div>
      <zm-detail-table :list="returnGoodsInfoList" :info="returnData"></zm-detail-table>
      <zm-table-data v-if="infoData.productType === '3' && infoData.isCustomize === '1'" class="mt20" :data="returnData.customizePrice" :columns="returnDetailCustomizeColumns" :show-page="false"></zm-table-data>
    </div>

    <div v-else-if="['6'].includes(infoData.type)">
      <div class="mt20 fb">退货信息</div>
      <zm-table-data class="mt20" :data="returnData.goodsList" :columns="returnProductColumns" :show-page="false"></zm-table-data>
    </div>

    <div v-else-if="['7'].includes(infoData.type)">
      <div class="mt20 fb">退货信息</div>
      <zm-table-data class="mt20" :data="returnData.activeList" :columns="returnWenlvColumns" :show-page="false"></zm-table-data>
      <div class="mt20">退货说明：{{returnData.refundRemark || '--'}}</div>
    </div>

    <!-- 客户详情 -->
    <detail-container v-if="customerVisible" v-model="customerVisible" :obj="detailObj" :id="customerId" type="Customer"></detail-container>
    <detail-container v-if="productVisible" v-model="productVisible" :id="productId"></detail-container>
  </div>
</template>

<script>
import axios from 'axios'

import {
  baseInfoList,
  productInfoList,
  returnGoodsInfoList,
  wenlvInfoList,
  customizePriceColumns,
  returnDetailCustomizeColumns,
  productListColumns,
  returnProductColumns,
  returnWenlvColumns
} from '../const'
import ZmDetailTable from '@/components/zmDetailTable'
import DetailContainer from '@/components/DetailContainer'

export default {
  components: { ZmDetailTable, DetailContainer },
  props: {
    infoData: {
      type: Object,
      default () {
        return {}
      }
    },
    returnData: {
      type: Object,
      default () {
        return {}
      }
    },
    businessId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      downVisible: false,
      customerVisible: false,
      detailObj: {},
      customerId: '',
      productVisible: false,
      productId: '',
      returnVisible: false,
      customizePriceColumns: customizePriceColumns(this)
    }
  },
  computed: {
    baseInfoList () {
      return baseInfoList(this)
    },
    productInfoList () {
      return productInfoList(this)
    },
    wenlvInfoList () {
      return wenlvInfoList(this)
    },
    returnGoodsInfoList () {
      return returnGoodsInfoList(this)
    },
    returnDetailCustomizeColumns () {
      return returnDetailCustomizeColumns(this)
    },
    productListColumns () {
      return productListColumns(this)
    },
    returnProductColumns () {
      return returnProductColumns(this)
    },
    returnWenlvColumns () {
      return returnWenlvColumns(this)
    },
    infoTitle () {
      // productType 1兑换券，2卖品券，3点卡，4次卡，5优惠券
      let obj = {
        1: '券产品信息(电影券)',
        2: '券产品信息(卖品券)',
        3: '点卡产品信息',
        4: '次卡产品信息',
        5: '优惠券'
      }
      if (this.infoData.productType === '3') {
        return (
          obj[+this.infoData.productType] +
          (this.infoData.isCustomize === '1' ? '(自定义金额)' : '(统一金额)')
        )
      } else {
        return obj[+this.infoData.productType]
      }
    }
  },
  methods: {
    goCustomerDetail (obj) {
      // 客户详情
      this.detailObj = {
        customerName: obj.customerName,
        id: obj.customerId
      }
      this.customerId = obj.customerId
      this.customerVisible = true
    },
    goProductDetail (productId) {
      // 调用产品详情
      this.productId = productId
      this.productVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
// @import '~styles/_size.css';
$color: #fafafa;
$height: 40px;
.detail-table {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    tr {
      display: inline-block;

      td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 10px;
      }
    }
  }
  &__name {
    // height: $height;
    background: $color;
    text-align: center;
    width: 200px;
    display: inline-block;
    min-height: $height;
    line-height: 40px;
    &__icon {
      left: 10px;
    }
  }
  &__value {
    width: calc(100% - 205px);
    display: inline-block;
    min-height: $height;
    line-height: 30px;
  }
}
</style>
